<template>
  <div>
    <div class="head">
      <el-form inline :model="selectdata"
               label-width="150px"
               size="small"
      >
      </el-form>
    </div>


    <div>
      <!-- 表 -->
      <el-table :data="tableData" border v-loading="loading">
        <el-table-column label="ID" align="center">
          <template slot-scope="scope">{{ scope.row.id }}</template>
        </el-table-column>

        <el-table-column label="用户ID" align="center">
          <template slot-scope="scope">{{ scope.row.userId }}</template>
        </el-table-column>


        <el-table-column label="用户名称" align="center">
          <template slot-scope="scope">{{ scope.row.username }}</template>
        </el-table-column>


        <el-table-column label="笔记内容" align="center">
          <template slot-scope="scope">{{ scope.row.notes }}</template>
        </el-table-column>


        <el-table-column label="图片地址" align="center" prop="avatar">
          <template slot-scope="scope">
            <el-image :src="scope.row.image" v-if="scope.row.image" class="img-wrap"
                      :preview-src-list="scope.row.image |toArray"></el-image>
          </template>
        </el-table-column>

        <el-table-column label="点赞量" align="center">
          <template slot-scope="scope">{{ scope.row.likeNum }}</template>
        </el-table-column>


        <el-table-column label="创建时间" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.createTime }}</span>
          </template>
        </el-table-column>


      </el-table>
      <div class="page">
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                       :current-page="currentPage" :page-sizes="[10, 20, 30, 40]" :page-size="pageSize"
                       layout="total, sizes, prev, pager, next, jumper" :total="total"></el-pagination>
      </div>
    </div>

    <el-dialog
        :title="title"
        :visible.sync="open"
        width="30%"
        center>
      <el-form ref="form" :model="form" label-width="150px" style="width: 400px">
        <el-form-item label="类型名称:">
          <el-input v-model="form.name" placeholder="请输入类型名称"></el-input>
        </el-form-item>


        <el-form-item label="图片">
          <el-upload
              :action="action"
              list-type="picture-card"
              :before-upload='beforeAvatarUpload'
              :on-success='handleAvatarSuccess'
              :on-remove="handleRemove">
            <i class="el-icon-plus"></i>
          </el-upload>
          <el-dialog :visible.sync="dialogVisible1">
            <img width="100%" :src="dialogImageUrl" alt="">
          </el-dialog>
        </el-form-item>


        <el-form-item style="margin-top: 40px">
          <el-button @click="open=false">关闭</el-button>
          <span v-if="type==='add'">
             <el-button style="margin-left: 40px" type="primary" @click="saveOrUpdate('add')">保存</el-button>
          </span>
          <span v-if="type==='edit'">
             <el-button style="margin-left: 40px" type="primary" @click="saveOrUpdate('edit')">更新</el-button>
          </span>

        </el-form-item>
      </el-form>
    </el-dialog>

  </div>
</template>

<script>
import moment from 'moment'
import {food_type_list, add, update, detail} from "../../api/food_type";

import {notes_list} from '../../api/food_notes'

import switchEnv from '../../utils/global'

export default {
  name: "sys_user",
  data() {
    return {
      currentPage: 1,
      pageSize: 10,
      total: 0,
      tableData: [],
      dateRange: [],
      open: false,
      form: {},
      type: "",
      loading: false,
      dialogImageUrl: '',
      dialogVisible1: false,
      title: "",
      formInline: {},
      action: "",
      selectdata: {
        userId: "",
        nickname: "",

      }
    };
  },
  created() {
    this.getData();
    this.get_img_upload();


  },
  methods: {
    /**
     * 重置搜索
     */
    clearForm() {
      this.selectdata = {};
      this.getData();
    },


    saveOrUpdate(val) {
      if (val === 'add') {
        add(this.form).then(res => {
          if (res.status === 200) {
            this.$message.success("保存成功");
            this.open = false;
            this.getData();
            this.form.imgUrl = ""
          }
        })
      } else {
        update(this.form).then(res => {
          if (res.status === 200) {
            this.$message.success("更新成功");
            this.open = false;
            this.getData()
          }
        })
      }

    },

    openDialog(type, val) {
      if (type === 'add') {
        this.form = {};
        this.open = true;
        this.type = "add";
        this.title = "新增类型"

      } else {
        this.type = "edit";
        this.title = "修改类型";
        let params = {};
        params.id = val;
        detail(params).then(res => {
          if (res.status === 200) {
            this.open = true;
            this.form = res.data;
          }
        })
      }
    },

    get_img_upload() {
      let url_domain = (switchEnv().BASE_API);
      let upload_url = '/upload/img';
      console.log(url_domain + upload_url);
      this.action = url_domain + upload_url;
    },

    handleRemove(file, fileList) {
      console.log(file, fileList);
    },


    /**
     * 搜索
     */
    search() {
      this.currentPage = 1;
      this.getData()
    },


    handleAvatarSuccess(res) {
      console.log(res);
      if (res.status === 200) {
        this.form.imgUrl = res.data;
      }
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === "image/jpeg" || file.type === "image/png";
      const isLt2M = file.size / 1024 / 1024 < 3;
      if (!isJPG) {
        this.$message.error("上传图片只能是 JPG 和 Png 格式!");
        return false;
      }
      if (!isLt2M) {
        this.$message.error("上传图片大小不能超过 3MB!");
        return false;
      }
    },


    /**
     * 获取数据
     */
    getData() {
      let params = {};
      this.loading = true;
      params.pageSize = this.pageSize;
      params.pageNumber = this.currentPage;
      notes_list(params).then(res => {
        if (res.status === 200) {
          this.loading = false;
          this.total = Number.parseInt(res.data.total);
          this.tableData = res.data.list;
        }

      })
    },
    /**
     * 改变每页大小
     */
    handleSizeChange(e) {
      this.pageSize = e;
      this.getData();
    },
    /**
     * 改变当前页
     */
    handleCurrentChange(e) {
      this.currentPage = e;
      this.getData();
    },
  },
  filters: {
    filterCtime(ctime) {
      // 过滤时间
      if (ctime) {
        return moment(ctime).format("YYYY-MM-DD HH:mm:ss");
      } else {
        return '暂无数据'
      }
    },
    filterShow(show) {
      if (show === 1) {
        return '显示'
      } else {
        return '不显示'
      }
    }
  }
}
</script>

<style scoped>

</style>
